<template>
	<view class="">
		<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<view class="m-2 pl-3 bg-white rounded-20">
					<u-radio-group v-model="value" @change="checkboxGroupChange">
						<view class="d-flex flex-column">
							<u-radio v-model="item.show" v-for="(item, index) in spec_detail" :key="index" 
								:name="item.name" active-color="#F24F4A" shape="circle">
								<view class="py-3 border-bottom w-100 flex-1" >
									<view>{{item.name}}</view>
								</view>
							</u-radio>	
						</view>
					</u-radio-group>
				</view>	
				<view class="text-999 m-2">
					选择需要删除的参数值, 一次只能删除一个
				</view>
			</view>
		</scroll-view>
		<view class="footer"></view>
		<view class="bg-white release py-2 w-100 position-fixed bottom-0">
			<button type="warn" @click="delete_param">删除参数</button>
		</view>
		<!-- 模态框 -->
		
		<u-modal v-model="show" show-cancel-button @confirm="confirm_delete" mask-close-able>
			<view class="p-3">
				<view class="text-center">你确定要将【{{detail.attr_name}}】规格下的【{{delete_value}}】参数值删除吗?</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				u_loadmore:true, // 加载中 
				goods_id:0, // 商品ID
				specification_id:0, // 规格ID
				attr_id:0, // 属性ID
				detail:"", // 属性详情
				spec_detail:"", // 属性列表
				show: false,
				attr_id:0, // 规格属性ID
				scrollHeight:0, // 屏幕高度
				
				delete_value:"", // 要删除的属性
				old_attr_values:"", // 修改前的属性值
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// 删除参数
			delete_param(){
				this.show=true
			},
			// 多选框
			checkboxGroupChange(e){
				this.delete_value=e
				console.log(this.delete_value)
			},
			// 确认删除参数
			confirm_delete(){
				this.$H.post("v2/store/goods/specification/attribute/value/delete",{
					goods_id:this.goods_id,
					specification_id:this.specification_id,
					attr_id:this.attr_id,
					old_attr_values:this.old_attr_values,
					delete_value:this.delete_value.toString()
				}).then(res=>{
					console.log(res)
					if(res.data){
						this.$u.toast("删除成功")
						uni.navigateBack({
							delta:1
						})
						getApp().globalData.spec_add="添加"
					}else{
						this.$u.toast(res.status.error_desc);
					}
				})
			},
		},
		onLoad(e) {
			this.attr_id=e.attr_id
			this.goods_id=e.goods_id
			this.specification_id=e.specification_id
			console.log(e)
			this.$H.post("v2/store/goods/specification/attribute/detail",{
				attr_id:this.attr_id
			}).then(res=>{
				this.detail=res.data
				this.old_attr_values=res.data.attr_values.reduce((acc,item)=>{
					acc.push(item)
					return acc
				},[])
				this.spec_detail=res.data.attr_values.reduce((acc,item)=>{
					acc.push({
						name:item,
						show:false
					})
					return acc
				},[])
				
				this.u_loadmore=false
				console.log(this.spec_detail)
			})
		}
	}
</script>

<style>
	u-radio{
		width: 100%!important;
	}
	.u-radio{
		width: 100%!important;
	}
	.u-radio__label{
		width: 100%;
		margin-right: 0rpx!important;
	}
</style>
